<template>
  <!-- 收集组件 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <div class="left-main-box">
          <!-- 标题 -->
          <div class="collect-title">全部标签</div>
          <!-- 内容父盒子 -->
          <div class="collect-content-box">
            <ul class="collect-content">
              <transition-group name="collect" appear class="content-move-box">
                <li
                  v-for="item in collectTagList"
                  :key="item.id"
                  @click="goTagIsArticles(item.tagName)"
                >
                  <!-- 内容大盒子 -->
                  <div class="content-box">
                    <!--  半透明 遮罩层 -->
                    <div class="collectMsck"></div>
                    <!-- 图片盒子 -->
                    <div class="picture">
                      <img :src="item.avatar" alt="" />
                      <!-- 标识符 -->
                      <span class="icon iconfont">&#xe67f;</span>
                      <span class="heat"
                        ><i class="iconfont">&#xe634;</i> {{ item.heat }}</span
                      >
                    </div>
                    <!-- 文字 -->
                    <div class="text">{{ item.tagName }}</div>
                  </div>
                </li>
              </transition-group>
            </ul>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  //  接口
  import { tagsAllCollect } from '../../api/tags.js';
  export default {
    name: 'Collect',
    data() {
      return {
        collectTagList: [], // 存储所有的 集合标签
      };
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
    methods: {
      // 获取所有收集标签
      async getCollectTagAll() {
        const { data: res } = await tagsAllCollect();
        if (res) {
          this.collectTagList = res.data;
        }
      },
      //  点击 去 该标签分类的 页面
      goTagIsArticles(tag) {
        //   动态路由传递对象 router下的index 规则里面 不需要  :id  和 props
        this.$router.push({
          path: '/articles',
          name: 'Articles',
          query: { type: 'tag', val: tag },
        });
      },
    },
    created() {
      this.getCollectTagAll();
    },
  };
</script>
<style lang="less" scoped>
  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/collect.less');
  //  动画
  // 刚开始的时候
  .collect-enter,
  .collect-leave-to {
    opacity: 0;
    transform: translateY(50px);
  }
  // 中间过度
  .collect-enter-active {
    transition: all 2s;
  }
  // 最后
  .collect-enter-to {
    opacity: 1;
    transform: translateY(0px);
  }
</style>
